// Dark codemirror theming

#editor .CodeMirror, .quicklook .body .CodeMirror {
    color:@grey-0;
}

.CodeMirror-selected { background-color:@selection-dark !important; }

.CodeMirror-cursor { background: @c-primary; }

// First the code blocks
.cm-comment, .cm-fenced-code { color:@grey-1; }
.cm-fenced-code {
    &.cm-comment    { color: @grey-3; }
    &.cm-attribute  { color: @blue-3; }
    &.cm-builtin    { color: @blue-3; } // Some modes use this for keywords
    &.cm-string     { color: @green-0; }
    &.cm-string-2   { color: @gold-selection-dark; }
    &.cm-variable   { color: @grey-1; }
    &.cm-variable-2 { color: @blue-0; }
    &.cm-keyword    { color: @purple-selection; }
    &.cm-property   { color: @orange-1; }
    &.cm-atom       { color: @green-selection-dark; }
    &.cm-number     { color: @blue-3; }
}

// HTML tags
.cm-tag       { color: @orange-2; }
.cm-attribute { color: @blue-3; }
.cm-bracket   { color: @grey-1; }
.cm-string    { color: @green-0; }

// Code background
.cm-comment:not(.cm-formatting):not(.cm-fenced-code) { background-color: @grey-4; }

// TYPOGRAPHY
.cm-formatting-header-1, .cm-formatting-header-2, .cm-formatting-header-3,
.cm-formatting-header-4, .cm-formatting-header-5, .cm-formatting-header-6,
.cm-url { color: @c-primary; }

/* LISTS */
.cm-formatting-list-ul,
.cm-formatting-list-ol { color: @c-primary; }

/* TYPOGRAPHY */
.cm-quote, .cm-link, .cm-strong, .cm-em { color:@blue-3; }
.cm-spell-error { border-bottom:2px dotted @bg-error; }
.cm-zkn-tag, .cm-zkn-id, .cm-zkn-link { color:@c-primary; }
.cma { color: @blue-3; }

// citations
.citeproc-citation {
  background-color: @grey-5;
  &.error { color: @bg-error; }
}

.cm-formatting-escape { color:@grey-0; }

.CodeMirror-foldmarker {
  background-color: @grey-5;
  color: @grey-2;

  &:hover { background-color: @grey-4; }
}

.CodeMirror-guttermarker-subtle { color: #464646; }

// Hint related stuff
.CodeMirror-hints {
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border: 1px solid @grey-5;

  background: @grey-7;
  li.CodeMirror-hint {
    color: @grey-0;

    &:hover { background-color: @grey-5; }
  }

  li.CodeMirror-hint-active {
    background-color: @c-primary-shade;
    color: @grey-0;

    &:hover { background-color: @c-primary; }
  }

  .cm-hint-colour {
    color: @grey-3;
    background-color: @grey-5;
  }
}
